<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>校园交流平台</title>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <!-- 引入vuejs -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 引入element样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入element组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!--模板通用css-->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1223325_xux3soz2a0d.css">
</head>
<body>
    <el-container id="app" v-cloak>
            <div th:replace="fragment/common::header"></div>
            <div class="pad"></div>
            <div style="width:80%;margin:0px auto;">

                <el-card class="topshow" style="float:left;">
                    <div slot="header">
                        <i class="iconfont icon-hot1"></i>
                        <span>最热主题</span>
                        <el-link type="primary" href="themelist" style="float: right; padding: 3px 0">主题列表</el-link>
                    </div>
                    <div v-for="(hottheme,index) in hotthemes" :key="index" class="item">
                        <div class="antext anindex">{{index+1}}:&nbsp;&nbsp;</div>
                        <a :href="'mainpostslist?themeId='+hottheme.id" v-if="hottheme.name!='----'"><div class="antext antitle">{{hottheme.name}}</div></a>
                        <div v-if="hottheme.name=='----'" class="antext antitle">{{hottheme.name}}</div>
                        <div class="antext antime"><span v-if="hottheme.name!='----'">主贴数:</span>{{hottheme.count}}</div>
                    </div>
                </el-card>
                <el-card class="topshow" style="float:right;">
                        <div slot="header">
                            <i class="iconfont icon-hot1"></i>
                            <span>最热主贴</span>
                        </div>
                        <div v-for="(hotmain,index) in hotmains" :key="index" class="item">
                            <div class="antext anindex">{{index+1}}:&nbsp;&nbsp;</div>
                            <a :href="'postsinfo?id='+hotmain.id" v-if="hotmain.title!='----'"><div class="antext antitle">{{hotmain.title}}</div></a>
                            <div v-if="hotmain.title=='----'" class="antext antitle">{{hotmain.title}}</div>
                            <div class="antext antime"><span v-if="hotmain.title!='----'">跟帖数:</span>{{hotmain.count}}</div>
                        </div>
                    </el-card>
                
                <el-card class="topshow" style="float:left;">
                    <div slot="header">
                        <i class="iconfont icon-new"></i>
                        <span>最新主题</span>
                        <el-link href="themelist" type="primary" style="float: right; padding: 3px 0">主题列表</el-link>
                    </div>
                    <div v-for="(newtheme,index) in newthemes" :key="index" class="item">
                        <div class="antext anindex">{{index+1}}:&nbsp;&nbsp;</div>
                        <a :href="'mainpostslist?themeId='+newtheme.id" v-if="newtheme.name!='----'"><div class="antext antitle">{{newtheme.name}}</div></a>
                        <div v-if="newtheme.name=='----'" class="antext antitle">{{newtheme.name}}</div>
                        <div class="antext antime">{{newtheme.createtime}}</div>
                    </div>
                </el-card>
                <el-card class="topshow" style="float:right;">
                        <div slot="header">
                            <i class="iconfont icon-new"></i>
                            <span>最新主贴</span>
                        </div>
                        <div v-for="(newmain,index) in newmains" :key="index" class="item">
                            <div class="antext anindex">{{index+1}}:&nbsp;&nbsp;</div>
                            <a :href="'postsinfo?id='+newmain.id" v-if="newmain.title!='----'"><div class="antext antitle">{{newmain.title}}</div></a>
                            <div v-if="newmain.title=='----'" class="antext antitle">{{newmain.title}}</div>
                            <div class="antext antime">{{newmain.createtime}}</div>
                        </div>
                    </el-card>
            </div>

        
    </el-container>
    <script th:inline="javascript">
        new Vue({
            el:'#app',
            data(){
                return{
                	activeIndex: '2',
                    userName:'张三 ',
                    hotthemes:[],//热主题
                    hotmains:[],//热主贴
                    newthemes:[],//新主题
                    newmains:[]//新主贴
                }
            },
            created:function(){
            	this.userName=[[${session.userName}]];
            	this.getInitData();
            },
            methods:{
            	//选择nav选项
            	handleSelect(key, keyPath){
                    switch(key){
                    case '1':
                    	window.location.href="index";
                    	break;
                    case '2':
                    	window.location.href="forum";
                        break;
                    case '3':
                    	window.location.href="blog";
                        break;
                    case '4-1':
                        window.location.href="http://www.dl-city.com/";
                        break;
                    case '4-2':
                        window.location.href="http://citytsg.dlut.edu.cn/index.htm";
                        break;
                    case '4-3':
                        window.location.href="http://cityftp.dlut.edu.cn/index.htm";
                        break;
                    case '4-4':
                        window.location.href="http://172.30.2.66/vod/action/indexListAction.do?method=indexShow";
                        break;
                    case '4-5':
                        window.location.href="http://tv.byr.cn/show";
                        break;
                    }
                },
                getInitData(){
                	var _this=this;
                	$.ajax({
                		url:'hotthemes',
                		type:'get',
                		data:{},
                		dataType:'json',
                		success:function(data){
                			_this.hotthemes=data;
                		}
                	});
                	$.ajax({
                        url:'newthemes',
                        type:'get',
                        data:{},
                        dataType:'json',
                        success:function(data){
                            _this.newthemes=data;
                        }
                    });
                	$.ajax({
                        url:'hotmains',
                        type:'get',
                        data:{},
                        dataType:'json',
                        success:function(data){
                            _this.hotmains=data;
                        }
                    });
                	$.ajax({
                        url:'newtmains',
                        type:'get',
                        data:{},
                        dataType:'json',
                        success:function(data){
                            _this.newmains=data;
                        }
                    });
                }
            }
        })
    </script>
    <style>
        .topshow{
            margin-top: 20px;
            margin-bottom: 20px;
            width: 49%;
        }
        .cal{
            margin-top: 10px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            color: #66b1ff;
            font-size: 33px;
        }
        .time{
            height: 100px;
            line-height: 100px;
            text-align: center;
            color: #66b1ff;
            font-size: 28px;
        }
        .calendar{
            width: 38%;
            height: 325px;
            float: right;
        }
        .antime{
            float: right;
            width: 21%;
            margin-right: 5px;
            font-size: 13px;
            text-align: right;
            color: #909399;
        }
        .anindex{
            float: left;
            width: 2%;
            font-size: 15px;
            color: #303133;
            margin-left: 5px;
        }
        .antitle{
            float: left;
            width: 73%;
            overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
            margin-left: 5px;
            font-size: 14px;
            color: #303133;
        }
        .antitle:hover{
            color: #409EFF;
            text-decoration: underline;
        }
        .antext{
            height: 40px;
            line-height: 40px;
        }
        .item{
            height: 40px;
            margin-bottom: 5px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            
        }
        .announce{
            width: 60%;
            float: left;
        }
    </style>
</body>
</html>